{include file="$header" /}
<section class="mk-personal">
    <mk-personal-public></mk-personal-public>
    <el-card class="box-card mk-personal-content">
        <div slot="header" class="clearfix">
            <span style="display: inline-block;margin-right: 10px;">{:lang('My points log')}</span>
            <el-input 
                style="width: 350px;margin:10px 0" 
                size="small" 
                placeholder="{:lang('Enter keywords to find')}" 
                v-model="search.keyword" 
                @change="getData">
            </el-input>
            <el-date-picker
                style="margin:10px 0"
                size="small"
                v-model="search.date"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="{:lang('to')}"
                start-placeholder="{:lang('start date')}"
                end-placeholder="{:lang('End date')}"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                @change="getData">
            </el-date-picker>
        </div>
        <div class="mk-user-log">
            <el-table
                :data="table"
                v-loading="loading">
                <el-table-column prop="explain">
                    <template slot-scope="scope">
                        <div>{{scope.row.explain}}</div>
                        <div style="color: #777;">{{scope.row.create_time}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="number" width="100px">
                    <template slot-scope="scope">
                        <span :style="{color: scope.row.inc == 1 ? '#18bc9c' : '#dd4a68'}">
                            {{scope.row.inc === 1 ? '+' : '-'}}{{lang(scope.row.number)}}
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @current-change="pageChange"
                :current-page="search.page"
                :page-size="search.pageSize"
                :total="pageTotal"
                layout="total, sizes, prev, pager, next, jumper"
                background
                hide-on-single-page>
            </el-pagination>
        </div>
    </el-card>
</section>
{include file="$component" /}
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                url: "user/integralLog",
                table: [],
                search:{
                    date: [],
                    keyword: "",
                    page: 1,
                    pageSize: 10,
                },
                pageTotal: 0,
                loading: false,
                pickerOptions: {
                    shortcuts: [{
                        text: lang('Last week'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: lang('Last month'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: lang('Last three months'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            end.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            }
        },
        created () {
            this.getData();
        },
        methods: {
            /**
             * 获取数据
             */
            getData() {
                let self     = this;
                self.loading = true;
                request.post(self.url, self.search, function(res) {
                    self.loading   = false;
                    self.table     = res.data;
                    self.pageTotal = res.count;
                });
            },
            /**
             * 分页改变时
             * @param  {String} val 当前页
             */
            pageChange(val) {
                this.search = Object.assign({}, this.search, {page: val});
            }
        },
        watch: {
            search() {
                this.getData();
            }
        }
    });
</script>
{include file="$footer" /}